<!-- 树形菜单栏结构 -->
<template>
  <template v-for="(item,index) in props.menuData">
    <el-menu-item 
        @click="handleClick(item,`${props.index}-${item.meta.id}` )"
        v-if="!item.children || item.children.length==0"
        :index="`${props.index}-${item.meta.id}`"
        :key="`${props.index}-${item.meta.id}`">
          <el-icon size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{item.meta.name}}</span>
    </el-menu-item>  

    <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
      <template #title>
          <el-icon size="20">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{item.meta.name}}</span>
      </template>
      <tree-menu :menuData="item.children" :index="`${props.index}-${item .meta.id}`" />
    </el-sub-menu>
  </template>

</template>

<script setup>
import {  useRouter } from 'vue-router'
import { useStore } from 'vuex';
import { useRoute } from 'vue-router'

const store = useStore()
const router=useRouter()
const route=useRoute()
const props=defineProps(['menuData','index'])

/* // active为索引,之后有用
const handleClick=(item,active)=>{
  router.push(item.meta.path)//点击菜单栏，路由跳转
  store.commit('changeActive',active)//更改菜单高亮
  store.commit('addMenu',item.meta)//点击菜单栏，添加对应tag选项
} */
// active为索引,之后有用
const handleClick=(item,active)=>{
  router.push(item.meta.path)//点击菜单栏，路由跳转
  store.commit('changeActive',active)//更改菜单高亮
  store.commit('addMenu',{
    ...item.meta,
    active // 新增：存储菜单索引
  });//点击菜单栏，添加对应tag选项
}

  
</script>
<style lang="less" scoped>
  
</style>